<template>
  <swiper :options="swiperOption" class="swiper">
    <swiper-slide class="swiper-slide"><LibaiwuGoods></LibaiwuGoods></swiper-slide>
    <swiper-slide class="swiper-slide"><LibaiwuGoods></LibaiwuGoods></swiper-slide>
    <swiper-slide class="swiper-slide"><LibaiwuGoods></LibaiwuGoods></swiper-slide>
    <swiper-slide class="swiper-slide"><LibaiwuGoods></LibaiwuGoods></swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev" v-if="false"></div>
    <div class="swiper-button-next" slot="button-next" v-if="false"></div>
  </swiper>
</template>
<script>
import LibaiwuGoods from '@/components/LibaiwuGoods.vue';
export default {
  components:{
    LibaiwuGoods,
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true // 允许点击小圆点跳转
        },
        // autoplay: {
        //   delay: 3000,
        //   disableOnInteraction: false // 手动切换之后继续自动轮播
        // },
        slidesPerView: 4,
        spaceBetween:20,
        loop: true,
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev"
        // }
      }
    };
  }
};
</script>
<style scoped>
  .swiper{
    width: 100%;
    padding-bottom: 50px;
  }
  .swiper-slide img{
    width: 100%;
  }
</style>